<template>
    <el-row class="header">
        <el-col :span="6" class="company-col">
            <span class="company-titel">深圳市dylan网络科技</span>
        </el-col>
        <el-col :span="4" :offset="10" class="header-photo">
            <div class="demo-image__preview">
                <el-image style="width: 60px; height: 60px" :src="currentUser.userInfo.imgUrl" :zoom-rate="1.2" :initial-index="4"
                    fit="cover" />
            </div>
        </el-col>
        <el-col :span="4" class="logOut">
            <el-icon>
                <ArrowRightBold />
            </el-icon>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive } from 'vue';
import  {userStore}  from '@/store/user'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const currentUser = userStore();

</script>

<style>
.header {
    border-bottom: 0.5px rgb(49, 49, 47) dashed;
}

.company-titel {
    line-height: 10vh;
    font-weight: bolder;
}

.header-photo {
    text-align: right;
}

.header-photo .el-image {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 60px;
    height: 60px;
    border-radius: 0.5em;
}


.demo-image__preview {
    height: 100%;
}

.logOut .el-icon {
    top: 50%;
    transform: translate(10px, -50%);
}
</style>